<template>
  <div class="list">
    <Gheader
      style="
        margin-bottom: 6px;
        background: #ffffff;
        color: #333333;
        font-weight: bold;
      "
      position="center"
      title="编辑"
    ></Gheader>
    <div class="article">
      <div class="register-content form-content">
        <div class="register-content-title"><span>交通体验日</span></div>
        <!--        <div class="input-wrapper">-->
        <!--          <van-field v-model="form.problemTitle" readonly label="问题标题" placeholder="输入标题" input-align="right" />-->
        <!--        </div>-->
        <!--        <div class="input-wrapper">-->
        <!--          <van-field v-model="form.orgName" readonly label="部门" placeholder="输入部门" input-align="right"  />-->
        <!--        </div>-->
        <div class="input-wrapper">
          <van-field
            v-model="form.roadName"
            readonly
            label="道路名称"
            placeholder="输入道路名称"
            input-align="right"
          />
        </div>
        <div class="input-wrapper" v-if="radio == 1">
          <van-field
            v-model="form.intersectionName"
            readonly
            label="问题点位"
            placeholder="输入路口名称"
            input-align="right"
          />
        </div>
        <div class="input-wrapper" v-if="radio == 2">
          <van-field
            v-model="form.roadSection"
            readonly
            label="问题点位"
            placeholder="输入路段名称"
            input-align="right"
          />
        </div>
        <div class="input-wrapper">
          <van-field
            v-model="form.problemSortName"
            label="选择问题分类"
            placeholder="选择问题分类"
            @click="showPicker3 = true"
            clearable
            readonly
            input-align="right"
          />
          <van-popup v-model="showPicker3" position="bottom">
            <van-picker
              show-toolbar
              :columns="problemSortList"
              value-key="label"
              @confirm="onConfirmProblemSort"
              @cancel="showPicker3 = false"
            />
          </van-popup>
        </div>
        <div class="input-wrapper">
          <van-field
            v-model="form.trafficWayName"
            label="选择出行方式"
            placeholder="选择出行方式"
            @click="showPicker = true"
            clearable
            readonly
            input-align="right"
          />
          <van-popup v-model="showPicker" position="bottom">
            <van-picker
              show-toolbar
              :columns="trafficWayList"
              value-key="label"
              @confirm="onConfirm"
              @cancel="showPicker = false"
            />
          </van-popup>
        </div>
        <div class="input-wrapper">
          <div style="padding-left: 10px">问题上报单位</div>
          <el-select
            class="myselect"
            style="flex: 1"
            v-model="form.orgName"
            filterable
            ref="orgName"
            :loading="loading"
            placeholder="请输入关键词"
          >
            <el-option
              @click.native="changeOrg(item)"
              v-for="item in deptList"
              :key="item.name"
              :label="item.name"
              :value="item.name"
            >
            </el-option>
          </el-select>
        </div>
        <div class="input-wrapper">
          <van-field
          :value="moment(form.recordTime).format('YYYY-MM-DD HH:mm:ss')"
            readonly
            label="记录时间"
            placeholder="输入记录时间"
            input-align="right"
          />
        </div>
        <div
          class="input-wrapper vertical"
          style="flex-wrap: wrap; height: auto; border-bottom: none"
        >
          <div class="wrap-name" style="width: 100%; padding-left: 0">
            问题描述
          </div>
          <van-field
            v-model="form.problemDes"
            style="background: #f4f8fe"
            rows="3"
            autosize
            type="textarea"
            placeholder="输入问题描述"
          />
        </div>
        <div
          class="input-wrapper vertical"
          style="flex-wrap: wrap; height: auto; border-bottom: none"
        >
          <div class="wrap-name" style="width: 100%; padding-left: 0">
            解决建议
          </div>
          <van-field
            v-model="form.solution"
            style="background: #f4f8fe"
            rows="3"
            autosize
            type="textarea"
            placeholder="输入解决建议"
          />
        </div>
      </div>
      <div class="register-content">
        <div class="register-content-title"><span>现场照片</span></div>
        <div class="input-wrapper" style="height: auto; border-bottom: none">
          <van-uploader v-model="fileList" :after-read="afterRead" />
        </div>
      </div>
      <div class="btnwrapper">
        <van-button class="backbtn" block type="default" @click="$router.go(-1)"
          >返回</van-button
        >
        <van-button class="confirmbtn" block type="primary" @click="submitform"
          >保存</van-button
        >
      </div>
    </div>
  </div>
</template>

<script>
import {
  Icon,
  Pagination,
  Empty,
  Field,
  Radio,
  RadioGroup,
  Button,
  Uploader,
  Toast,
  Dialog,
} from "vant";
import {
  getuserinfo,
  getProblem,
  dictData,
  updateProblem,
  getChildDeptList,
  upload,
} from "@/api/myapi";
import Gheader from "@/components/Header";
import moment from "moment";
import ApplyMaterial from "@/components/ApplyMaterial.vue";
export default {
  name: "list",
  components: {
    ApplyMaterial,
    [Icon.name]: Icon,
    [Pagination.name]: Pagination,
    [Empty.name]: Empty,
    [Field.name]: Field,
    [RadioGroup.name]: RadioGroup,
    [Radio.name]: Radio,
    [Button.name]: Button,
    [Uploader.name]: Uploader,
    Gheader,
  },
  data() {
    return {
      form: {},
      activeIcon: require("../../assets/img/checked.png"),
      inactiveIcon: require("../../assets/img/nocheck.png"),
      ApplyMaterialInfoList: [],
      userInfo: {},
      showDia: false,
      disabled: true,
      checkStatus: 0,
      fileList: [],
      problemSortList: [],
      radio: "1",
      showPicker3: false,
      showPicker: false,
      trafficWayList: [],
      loading: false,
      deptList: [],
    };
  },
  methods: {
    moment,
    submitform() {
      this.form.fileList = this.fileList;
      // const problemId = this.$route.query.id
      // console.log(problemId)
      updateProblem(this.form, (res) => {
        if (res.code === 0) {
          Toast("保存成功");
          this.$router.go(-1);
        } else {
          Toast(res.msg);
        }
      });
    },
    getuserinfo() {
      getuserinfo(this.$route.query.openid, (res) => {
        if (res.code === 0) {
          this.userInfo = res.data || {};
          this.form.recorder = this.userInfo.id;
          this.form.name = this.userInfo.name;
          this.$forceUpdate();
        } else {
          this.userInfo = {};
        }
      });
    },
    changeOrg(val) {
      this.form = {
        ...this.form,
        orgName: val.name,
      };
    },
    onConfirm(val) {
      this.form.trafficWay = val.value;
      this.form.trafficWayName = val.label;
      this.showPicker = false;
    },
    onConfirm4(val) {
      this.form.orgName = val.name;
      this.showPicker4 = false;
    },
    onConfirmProblemSort(val) {
      this.form.problemSortName = val.label;
      this.form.problemSort = val.value;
      this.showPicker3 = false;
    },
    async afterRead(file) {
      var forms = new FormData();
      this.fileList.splice(this.fileList.length - 1, 1);
      forms.append("file", file.file);
      upload(forms, (res) => {
        if (res.code === 0) {
          this.fileList.push({
            url: res.data,
            fileUrl: res.data,
            isImage: true,
          });
        }
      });
    },
    getDetail() {
      getProblem(this.$route.query.id, (res) => {
        if (res.code === 0) {
          this.form = res.data;
          if (this.form.intersectionName) {
            this.radio = 1;
          } else if (this.form.roadSection) {
            this.radio = 2;
          }
          this.form.problemSortName = this.form.problemSort;
          this.form.trafficWayName = this.form.trafficWay;
          this.fileList = this.form.fileList.map((e) => {
            e.url = e.fileUrl;
            e.isImage = true;
            return e;
          });
          let list = this.trafficWayList.filter(
            (e) => e.value == this.form.trafficWay
          );
          let list2 = this.problemSortList.filter(
            (e) => e.value == this.form.problemSort
          );
          if (list.length) {
            this.form.trafficWayName = list[0].label;
          }
          if (list2.length) {
            this.form.problemSortName = list2[0].label;
          }
        }
      });
    },
    async getDict() {
      const { data } = await dictData("traffic_way");
      this.trafficWayList = data;
      let res = await dictData("problem_sort");
      this.problemSortList = res.data;
      let ress = await getChildDeptList("100");
      this.deptList = ress.data;
      this.getDetail();
    },
  },
  mounted() {
    this.getDict();
    this.getuserinfo();
  },
};
</script>

<style lang="less" scoped>
.list {
  height: 100%;
  overflow: auto;
  background: rgba(237, 243, 252, 1);
  box-sizing: border-box;
  position: relative;
  color: #404040;
  font-weight: normal;
  overflow: hidden;
  padding-bottom: 15px;
  .article {
    padding: 5px 15px;
    height: calc(100% - 60px);
    overflow: auto;
  }
  .list-item {
    background: #ffffff;
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 16px;
  }
  .list-title {
    display: flex;
    align-items: center;
    padding: 10px;
    border-bottom: 1px solid #ddd;
    .name {
      font-size: 14px;
      flex: 1;
      margin-left: 10px;
    }
  }
  .list-item-content {
    color: #646464;
    padding: 20px 10px;
    .items {
      padding: 6px 0;
      display: flex;
    }
  }
}
.input-wrapper {
  display: flex;
  align-items: center;
  background: #ffffff;
  border-radius: 6px;
  overflow: hidden;
  height: 40px;
  margin-bottom: 10px;
  width: 94%;
  margin-left: 3%;
  border: none;
  .inputicon_wrapper {
    position: relative;
    margin-right: 10px;
    &:after {
      content: "";
      position: absolute;
      right: 0;
      width: 1.4px;
      top: 2px;
      height: 20px;
      background: #bbbbbb;
    }
  }
  /deep/.van-radio__label {
    color: #b1b1b1;
  }
  .inputicon {
    width: 22px;
    height: 22px;
    margin: 0 10px 0 20px;
  }
  .img-icon {
    height: 13px;
    width: 13px;
  }
}
.tabs {
  width: 98%;
  background: #ffffff;
  padding: 10px;
  margin: 10px 0;
  border-radius: 6px;
  display: flex;
  .tabitem {
    flex: 1;
    text-align: center;
    &:not(:last-child) {
      border-right: 1px solid #b1b1b1;
    }
    &.active {
      color: #175fb3;
      font-weight: bold;
    }
  }
}
.register-content {
  margin: 10px auto 10px auto;
  background: #ffffff;
  padding-bottom: 12px;
  width: 100%;
  box-sizing: border-box;
  border-radius: 6px;
  .register-content-title {
    display: inline-block;
    background: url("../../assets/img/titlebg.png");
    background-size: 100% 100%;
    padding: 10px 15px 20px 15px;
    color: #ffffff;
  }
  .title {
    position: relative;
    color: #175fb3;
    margin-bottom: 10px;
    padding-left: 20px;
    &.required:before {
      position: absolute;
      left: 2.133vw;
      color: #ee0a24;
      font-size: 3.733vw;
      content: "*";
    }
  }
}
.input-wrapper {
  display: flex;
  align-items: center;
  border-radius: 0px;
  height: 40px;
  margin-bottom: 10px;
  border-bottom: 1px solid #d6e5fc;
  .van-cell {
    padding-left: 10px;
    padding-right: 10px;
    //background: #F4F8FE;
    border-radius: 6px;
  }
  .inputicon_wrapper {
    position: relative;
    margin-right: 10px;
    &:after {
      content: "";
      position: absolute;
      right: 0;
      width: 1.4px;
      top: 0px;
      height: 22px;
      background: #bbbbbb;
    }
  }
  /deep/.van-radio__label {
    color: #b1b1b1;
  }
  .inputicon {
    width: 22px;
    height: 22px;
    margin: 0 10px 0 18px;
  }
  .img-icon {
    height: 16px;
    width: 16px;
  }
}

.art-list-item {
  padding: 10px 20px 20px 20px;
  border-bottom: 1px solid #dcdcdc;
  background: linear-gradient(
    to bottom,
    #ffffff,
    rgba(255, 255, 255, 0.8),
    rgba(255, 255, 255, 0.7),
    rgba(255, 255, 255, 0.7),
    rgba(255, 255, 255, 0.3)
  );
  box-shadow: -2px -6px 20px rgba(143, 143, 143, 0.1);
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  transition: all 0.5s ease;
  .title {
    display: flex;
    align-items: center;
    div {
      flex: 1;
      font-size: 14px;
      padding: 10px 0;
      color: #646464;
    }
    img {
      width: 28px;
      height: 28px;
      margin-left: 14px;
    }
  }
  .list_content {
    height: auto;
    width: 100%;
  }
  .stitle {
    font-size: 15px;
    padding: 10px 0;
    color: #717171;
  }
  .date {
    color: #8c8c8c;
  }
  .item-img {
    width: 100%;
    margin-top: 4px;
  }
}
.btnwrapper {
  display: flex;
  font-weight: bold;
  padding: 20px;
  background: #ffffff;
  box-shadow: 0px -2px 5px rgba(0, 0, 0, 0.1);
  .backbtn {
    width: 100%;
    margin-right: 10px;
    background: #ffffff;
    border-color: #3276eb;
    border-radius: 8px;
    color: #3276eb;
  }
  .confirmbtn {
    width: 100%;
    margin-left: 10px;
    background: #3276eb;
    color: #ffffff;
    border-color: #3276eb;
    border-radius: 8px;
  }
}

.subbtn {
  border-color: #3f8cff;
  height: 46px;
  font-size: 15px;
  width: 100%;
  margin: 20px auto 0 auto;
  border-radius: 10px;
  background: #3276eb;
}
.myselect {
  /deep/.el-input--suffix .el-input__inner {
    padding-right: 10px;
  }
  /deep/ .el-input__inner {
    border: none;
    text-align: right;
  }
}
</style>
